<template>
    <div class="card-item" v-loading="dataStatus=='loading'">
        <div class="h-full flex-center" v-if="dataStatus=='error'">
            <component-page-loading font-size="1rem" status="error" @reload="dataStatus = 'loading'"></component-page-loading>
        </div>
        <div class="h-full flex flex-col justify-between" v-else>
            <div class="item-title">
                <div>{{ $t('stats.user.player.month.title') }}</div>
                <div>
                    <component-page-org-tree-option-check size="small" v-model="filterOption.plat_code" @change="getData"></component-page-org-tree-option-check>
                    <component-page-option-datetime-range type="monthrange" size="small" align="right" :clearable="false" class="w-56"
                                                          :init-last-day="365 * 2" v-model="filterOption.datetime" @change="getData">
                    </component-page-option-datetime-range>
                </div>
            </div>
            <div class="item-chart">
                <component-page-echarts ref="chartLine"></component-page-echarts>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataStatus: 'dle',
            filterOption: {
                plat_code: [],
                datetime: null,
            },
            data: null,
        }
    },
    watch: {
        '$i18n.locale': function (n, o) {
            if (this.data != null) {
                this.initChart(this.data);
            }
        },
    },
    methods: {
        initChart(chart) {
            let option = {
                color: ["#91c7ae", "#d48265"],
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    type: 'scroll',
                    padding: [0, 100],
                    data: [
                        this.$t('stats.user.player.u_sign'),
                        this.$t('stats.user.player.u_game'),
                        this.$t('stats.user.player.nu_sign'),
                        this.$t('stats.user.player.nu_game'),
                    ],
                    // selector: [{
                    //     type: 'all',
                    //     title: this.$t('echarts.legend.selector.all')
                    // }, {
                    //     type: 'inverse',
                    //     title: this.$t('echarts.legend.selector.inverse')
                    // }],
                    selected: {},
                },
                grid: {
                    top: 40,
                    right: 40,
                    bottom: 40,
                    left: 60,
                },
                xAxis: {
                    show: true,
                    boundaryGap: false,
                    data: chart.timed
                },
                yAxis: {
                    show: true,
                },
                series: [{
                    type: 'line',
                    name: this.$t('stats.user.player.u_sign'),
                    data: chart.data.u_sign.map(item => this.$store.getters['config/filterNumeral'](item))
                }, {
                    type: 'line',
                    name: this.$t('stats.user.player.u_game'),
                    data: chart.data.u_game.map(item => this.$store.getters['config/filterNumeral'](item))
                }, {
                    type: 'bar',
                    barMaxWidth: 10,
                    name: this.$t('stats.user.player.nu_sign'),
                    data: chart.data.nu_sign.map(item => this.$store.getters['config/filterNumeral'](item))
                }, {
                    type: 'bar',
                    barMaxWidth: 10,
                    name: this.$t('stats.user.player.nu_game'),
                    data: chart.data.nu_game.map(item => this.$store.getters['config/filterNumeral'](item))
                }]
            };
            // 默认不选中
            option.legend.selected[this.$t('stats.user.player.nu_sign')] = false;
            option.legend.selected[this.$t('stats.user.player.nu_game')] = false;
            // 渲染图表
            this.$refs.chartLine.setOption(option, true);
        },
        getData() {
            this.dataStatus = 'loading';
            axios.get('/stats/user/player/month', {
                params: this.filterOption
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataStatus = 'dle';
                    this.data = response.data.resp_data;
                    // 渲染图表
                    this.initChart(this.data);
                } else {
                    this.dataStatus = 'error';
                }
            });
        },
    },
}
</script>

<style scoped>

</style>
